<template>
    <div class="rlt-box" :style="{ borderRadius: `${data.rpxStyle['border-radius']}px` }">
        <template v-if="data.data.data.length > 0">
            <div class="flt-item flexs" v-for="(item, index) in data.data.data" :key="index">
                <div class="rlt-left">
                    <p class="rlt-left__title">实时成交</p>
                    <p class="rlt-left__time">{{ item.created_time }}</p>
                </div>
                <div class="rlt-right">
                    <div class="rlt-right__one flexs" :style="{ fontWeight: data.style.weight }">
                        <div class="rlt-right__title line-one">{{ item.product_name }}({{ item.level }})</div>
                        <div class="rlt-right__price">{{ item.buy_money }}元</div>
                        <div class="rlt-right__num">成交: {{ item.nums || 0 }}{{ item.unit }}</div>
                    </div>
                    <div class="rlt-right__two flexs">
                        <div class="rlt-right__seller line-one">
                            <el-tag :color="data.style.tag_bg" effect="dark" size="small" :style="{ color: data.style.tag_color }"> 卖家 </el-tag>
                            {{ item.seller_name }}
                        </div>
                        <div class="rlt-right__buyer line-one">
                            <el-tag :color="data.style.tag_bg" effect="dark" size="small" :style="{ color: data.style.tag_color }"> 买家 </el-tag
                            >{{ item.buyer_tel }}
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <div class="rlt-none flexs" v-else>暂无实时成交数据</div>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted } from "vue"

/**
 * 实时成交
 * @property {Object} pageData  页面数据
 */
const props = defineProps({
    data: {
        type: Object,
        default: {
            id: 10,
            type_name: "real_time_deal",
            text: "实时成交",
            data: {
                /**请求地址*/
                reqUrl: "",
                /**请求参数*/
                reqData: {},
                /* 当没有请求地址的时候，使用data数据 */
                data: [],
            },
        },
    },
})
</script>

<style lang="less" scoped>
.rlt-box {
    overflow: hidden;
    background-color: #fff;
    .flt-item {
        width: 100%;
        padding: 14px 10px;
        overflow: hidden;
        .rlt-left {
            flex: none;
            margin-right: 8px;
            padding-right: 8px;
            text-align: center;
            position: relative;
            border-right: 1px solid #f2f3f5;
            overflow: hidden;
            .rlt-left__title {
                font-size: 14px;
                color: #222;
                font-weight: bold;
            }
            .rlt-left__time {
                margin-top: 10px;
                font-size: 12px;
                color: #999;
            }
        }
        .rlt-right {
            flex: 1;
            overflow: hidden;
            .rlt-right__one {
                margin-bottom: 6px;
                .rlt-right__title {
                    flex: none;
                    max-width: 120px;
                    color: #000e37;
                }
                .rlt-right__price,
                .rlt-right__num {
                    color: #000e37;
                    flex: none;
                }
            }
            .rlt-right__two {
                overflow: hidden;
                .rlt-right__seller {
                    flex: none;
                    width: 50%;
                }
                .rlt-right__buyer {
                    flex: none;
                    width: 50%;
                    text-align: right;
                }
            }

            .el-tag {
                font-size: 12px;
                margin-right: 2px;
                padding: 0px 2px;
                border-width: 0;
            }
        }
    }
}

.rlt-none {
    width: 100%;
    height: 80px;
    overflow: hidden;
    font-size: 14px;
    color: #333;
}
</style>
